<script setup lang="ts">
const filter: any = ref(null)
let frames = ref(1)
let rad: any = ref(Math.PI / 180)
let bfx: any = ref(null)
const bfy: any = ref(null)

const freqAnimation = () => {
	frames.value += 0.2

	bfx.value = 0.03
	bfy.value = 0.03

	bfx.value += 0.005 * Math.cos(frames.value * rad.value)
	bfy.value += 0.005 * Math.sin(frames.value * rad.value)

	const bf = bfx.value.toString() + ' ' + bfy.value.toString()
	filter.value && filter.value.setAttributeNS(null, 'baseFrequency', bf)

	window.requestAnimationFrame(freqAnimation)
}

onMounted(() => {
	window.requestAnimationFrame(freqAnimation)
})
</script>

<template>
	<div class="component-layout">
		<h1 class="text-filter">一个苦逼的搬砖码农</h1>
		<p>我是一个苦逼的搬砖码农</p>

		<p>喜欢音乐和小说，带着一身文艺气息的程序员</p>
		<svg width="0">
			<filter id="filter">
				<feTurbulence
					id="turbulence"
					ref="filter"
					type="fractalNoise"
					baseFrequency=".03"
					numOctaves="20"
				/>
				<feDisplacementMap in="SourceGraphic" scale="70" />
			</filter>
		</svg>
	</div>
</template>

<style scoped>
.component-layout {
	filter: url('#filter');
}
.text-filter {
	font-size: 4rem;
	background: linear-gradient(#fff, #999, #ddd, #888);
	background-clip: text;
	filter: blur(4px);
}

@keyframes smoky {
	to {
		transform: translate3d(200px, -80px, 0) rotate(-40deg) skewX(70deg)
			scale(1.5);
		text-shadow: 0 0 20px whitesmoke;
		opacity: 0;
	}
}

@keyframes slide-up {
	from {
		transform: translateY(20px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}
</style>
